<template>
  <div>
    <el-card shadow="never" class="card_v">
      <el-tabs
        class="v_tabs"
        v-model="activeName"
        @tab-click="handleClick"
        :stretch="true"
        v-if="data"
      >
        <el-tab-pane label="基本" name="basic">
          <div class="topBox">
            <el-row>
              <el-col>
                <el-row>
                  <el-col :span="21" class="company_title">
                    {{ companyInfos.company }}
                    <el-button
                      v-if="companyInfos.company"
                      size="mini"
                      type="primary"
                      round
                      @click="companyDetails(companyInfos.id)"
                      >管理</el-button
                    >
                  </el-col>
                  <el-col :span="2" :offset="1">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="companyInfos.status_update == 1 ? '可更新' : '已是最新信息'"
                      placement="bottom"
                    >
                      <el-button class="item_b" type="primary" @click="update"
                        >更新</el-button
                      >
                    </el-tooltip>
                  </el-col>
                </el-row>
              </el-col>

              <el-descriptions
                title=""
                :column="4"
                :labelStyle="labelStyle"
                :contentStyle="contentStyle"
              >
                <el-descriptions-item label="邮箱">{{
                  companyInfos.email
                }}</el-descriptions-item>

                <el-descriptions-item label="联系人">{{
                  companyInfos.username
                }}</el-descriptions-item>
                <el-descriptions-item label="联系方式">{{
                  companyInfos.mobile
                }}</el-descriptions-item>
                <el-descriptions-item label="所属区域">{{
                  companyInfos.street_name
                }}</el-descriptions-item>
                <el-descriptions-item label="企业标签" :span="4">
                  <div v-if="companyInfos">
                    <el-tag
                      size="small"
                      v-for="item in companyInfos.label_true_name"
                      :key="item.id"
                      class="b_bule"
                      >{{ item.name }}</el-tag
                    >
                    <el-tag
                      size="small"
                      v-for="item in companyInfos.label_name"
                      :key="item.id"
                      class="b_bule"
                      >{{ item.name }}</el-tag
                    >
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="已解决" :span="4">
                  <div v-if="companyInfos.ttt_label">
                    <el-tag
                      class="b_bule b_red2"
                      v-for="(item, index) in companyInfos.ttt_label.true_get"
                      :key="item.id"
                      >{{ item.name }}</el-tag
                    >
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="未解决" :span="4">
                  <div v-if="companyInfos.ttt_label">
                    <el-tag
                      class="b_bule b_red"
                      v-for="(item, index) in companyInfos.ttt_label.false_get"
                      :key="item.id"
                      >{{ item.name }}</el-tag
                    >
                  </div>
                </el-descriptions-item>
              </el-descriptions>
            </el-row>
          </div>

          <el-descriptions
            :labelStyle="{ fontWeight: 'bold' }"
            class="margin-top d_boreder descriptions_1"
            title=""
            :column="2"
            direction="vertical"
          >
            <el-descriptions-item label="企业评分" :span="2">
              {{ data.percentileScore }}
              <span class="b_bule" v-for="item in tags" :key="item">{{ item }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="法定代表人" :span="2">{{
              data.legalPersonName
            }}</el-descriptions-item>
            <el-descriptions-item label="成立时间">{{
              data.estiblishTime | time
            }}</el-descriptions-item>
            <el-descriptions-item label="登记状态">{{
              data.regStatus
            }}</el-descriptions-item>
            <el-descriptions-item label="注册资本">{{
              data.regCapital
            }}</el-descriptions-item>
            <el-descriptions-item label="实缴资本">{{
              data.actualCapital
            }}</el-descriptions-item>
            <el-descriptions-item label="企业类型">{{
              data.companyOrgType
            }}</el-descriptions-item>
            <el-descriptions-item label="参保人数">{{
              data.socialStaffNum
            }}</el-descriptions-item>
            <el-descriptions-item label="登记机关">{{
              data.regInstitute
            }}</el-descriptions-item>
            <el-descriptions-item label="注册地址">{{
              data.regLocation
            }}</el-descriptions-item>
            <el-descriptions-item label="人员规模" :span="2">{{
              data.staffNumRange
            }}</el-descriptions-item>
          </el-descriptions>

          <el-descriptions
            :labelStyle="{ fontWeight: 'bold' }"
            class="margin-top d_boreder descriptions_2"
            title=""
            :column="2"
            direction="vertical"
          >
            <el-descriptions-item label="统一社会信用代码">{{
              data.creditCode
            }}</el-descriptions-item>
            <el-descriptions-item label="纳税人识别号">{{
              data.taxNumber
            }}</el-descriptions-item>
            <el-descriptions-item label="工商注册号">{{
              data.regNumber
            }}</el-descriptions-item>
            <el-descriptions-item label="组织机构代码">{{
              data.orgNumber
            }}</el-descriptions-item>
          </el-descriptions>

          <el-descriptions
            :labelStyle="{ fontWeight: 'bold' }"
            class="margin-top d_boreder"
            title=""
            :column="2"
            direction="vertical"
          >
            <el-descriptions-item label="英文名" :span="2">{{
              data.property3
            }}</el-descriptions-item>
            <el-descriptions-item label="曾用名" :span="2">{{
              data.historyNames
            }}</el-descriptions-item>
            <el-descriptions-item label="所属行业" :span="2">{{
              data.industry
            }}</el-descriptions-item>
          </el-descriptions>

          <el-descriptions
            :labelStyle="{ fontWeight: 'bold' }"
            class="margin-top"
            title=""
            :column="2"
            direction="vertical"
          >
            <el-descriptions-item label="经营范围" :span="2">
              {{ data.businessScope }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="走访" name="interview">
          <interview
            v-if="activeName == 'interview'"
            :company_id="company_id"
          ></interview>
        </el-tab-pane>
        <el-tab-pane label="需求" name="demand">
          <demand v-if="activeName == 'demand'" :company_id="company_id"></demand>
        </el-tab-pane>
        <el-tab-pane label="专利" name="patent">
          <Visitpatent
            v-if="activeName == 'patent'"
            :form_admin="companyInfos"
            :PatentNumber="PatentNumber"
            :company_id="company_id"
          ></Visitpatent>
        </el-tab-pane>

        <el-tab-pane label="商标" name="trademark">
          <trademark
            v-if="activeName == 'trademark'"
            :form_admin="companyInfos"
            :PatentNumber="PatentNumber"
          ></trademark>
        </el-tab-pane>
        <el-tab-pane label="诉讼" name="litigation">
          <litigation
            v-if="activeName == 'litigation'"
            :form_admin="companyInfos"
          ></litigation>
        </el-tab-pane>
        <el-tab-pane label="荣誉" name="honor">
          <honor v-if="activeName == 'honor'" :PatentNumber="PatentNumber" :form_admin="companyInfos"></honor>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import {
  currency,
  companydetail,
  companynum,
  tianyanchaphoneCurrency,
  loginInfo,
  companyInfo,
} from "@/api/newuser";
import Visitpatent from "./Visitpatent.vue";
import interview from "./interview.vue";
import litigation from "./litigation.vue";
import trademark from "./trademark.vue";
import demand from "./demand.vue";
import honor from "./honor.vue";
import { getToken } from "@/utils/auth";
import { log } from "util";

export default {
  components: { Visitpatent, litigation, honor, trademark, interview, demand },
  data() {
    return {
      id: this.$route.query.id,
      tags: [],
      data: {},
      activeName: "basic",
      index: 0,
      url: "http://open.api.tianyancha.com/services/open/ic/baseinfo/normal",
      getToken: getToken() || sessionStorage.getItem("token"),
      tokenIfon: sessionStorage.getItem("token"),
      page: 1,
      limit: 10,
      count: 0,
      companyInfos: {},
      num: null,
      PatentNumber: {},
      labelStyle: {
        fontSize: "14px",
        fontWeight: "bold",
        margin: "5px 0px 0 0",
      },
      contentStyle: {
        fontSize: "14px",
        // fontWeight: 'bold'
        margin: "5px 0px 0 0",
      },
    };
  },
  props: {
    type: {
      type: String,
      default: "web",
    },
    table: {
      type: Boolean,
      default: false,
    },
    company_id: {
      type: Number,
      default: 0,
    },
    form_admin: {
      type: Object,
      default: () => ({}),
    },
    status_agent: {
      type: Number,
      default: 1,
    },
    status_update: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    status_agent(val) {
      if (val == 0) {
        // console.log('查询');
        if (this.type == "phone") {
          this.tianyanchaphoneCurrency();
        } else {
          this.currency();
        }
      } else {
        if (this.companyInfos.company) {
          companydetail({ company: this.companyInfos.company }).then((res) => {
            this.data = res;
            this.tags = this.data.tags.split(";");
          });
        }
      }
    },
    company_id(val) {
      // this.companynum()
      companyInfo({
        company_id: this.company_id,
      }).then((res) => {
        this.companyInfos = res;
        if (this.companyInfos.company) {
          companydetail({ company: this.companyInfos.company }).then((res) => {
            if (res) {
              this.data = res;
              this.tags = this.data.tags.split(";");
            } else {
              this.currency();
            }
          });
        }
      });
    },
  },

  async  mounted() {
    
    let res = await loginInfo({
      account: "shunqi",
      password: "123456",
      Authorization: this.getToken,
    })
    // .then((res) => {
      // this.tokenIfon = res.token;
    // });
    this.tokenIfon = res.token;

    if (this.company_id) {
      companyInfo({
        company_id: this.company_id,
      }).then((res) => {
        this.companyInfos = res;
        if (this.status_agent == 0) {
          // console.log('查询');
          if (this.type == "phone") {
            this.tianyanchaphoneCurrency();
          } else {
            this.currency();
          }
        } else {
          if (this.companyInfos.company) {
            companydetail({ company: this.companyInfos.company }).then((res) => {
              if (res) {
                this.data = res;
                this.tags = this.data.tags.split(";");
              } else {
                this.currency();
              }
            });
          }
        }
      });
    }
    if (this.companyInfos.company) {
      companydetail({ company: this.companyInfos.company }).then((res) => {
        if (res) {
          this.data = res;
          this.tags = this.data.tags.split(";");
        } else {
          this.currency();
        }
      });
    }
  },
  filters: {
    //时间戳转换
    time(date) {
      date = new Date(date);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + m + "-" + d;
    },
  },
  beforeDestroy() {
    sessionStorage.removeItem("currencyIndo");
  },
  methods: {
    companynum() {
      // if (JSON.parse(localStorage.getItem('PatentNumber'))) {
      //   this.PatentNumber = JSON.parse(localStorage.getItem('PatentNumber'))
      // }
      // console.log('this.form_admin.company_name',);
      // if(this.form_admin.company_name){
      //   companynum({ company: this.form_admin.company_name }).then(res => {
      //     this.PatentNumber = res
      //     // console.log(res, 'this.PatentNumber');
      //     localStorage.setItem('PatentNumber', JSON.stringify(this.PatentNumber))
      //   })
      // }
    },
    update() {
      if (this.status_update == 1) {
        if (this.type == "phone") {
          this.tianyanchaphoneCurrency();
        } else {
          this.currency();
        }
        // this.$emit('update')
        companyInfo({
          company_id: this.company_id,
        }).then((res) => {
          this.companyInfos = res;
        });
      } else {
        this.$message.error("已是最新信息");
      }
    },
    handleClick(e) {
      // console.log(e);
    },
    handleClose() {
      this.$emit("close");
    },
    companyDetails(id) {
      this.$router.push({
        path: "/companyDetails",
        query: {
          company_id: id,
        },
      });
    },
    currency() {
      currency({
        url: this.url,
        params: JSON.stringify({
          keyword: this.companyInfos.company,
        }),
        inter_id: 1116,
        token: this.tokenIfon,
      }).then((res) => {
        this.data = res;
        this.tags = this.data.tags.split(";");
        this.$emit("update");
      });
    },
    tianyanchaphoneCurrency() {
      tianyanchaphoneCurrency({
        url: this.url,
        params: JSON.stringify({
          keyword: this.form_admin.company_name,
        }),
        inter_id: 1116,
        token: this.tokenIfon,
      }).then((res) => {
        this.data = res;
        this.tags = this.data.tags.split(";");
        this.$emit("update");
      });
    },
  },
};
</script>

<style scoped lang="less">
.topBox {
  border-bottom: 3px solid #f4f5f7;
  margin-bottom: 20px;
}
.company_title {
  font-weight: bolder;
  font-size: 24px;
  margin-bottom: 5px;
  position: relative;
  .el-button {
    position: absolute;
    margin-left: 10px;
  }
}
.descriptions_title {
  font-weight: bold;
}

::v-deep .el-drawer__header {
  margin-bottom: 20px;
  display: none;
}

::v-deep .item_b {
  padding: 5px 10px;
  position: absolute;
  right: 25px;
}

::v-deep .card_v .el-card__body {
  min-height: 1010px;
  padding: 0;

  .el-tabs .el-tabs__content {
    padding: 0 20px;

    tr th {
      font-size: 16px;
    }

    tr td {
      font-size: 16px;
    }
  }
}
.b_red {
  color: #ff5f58 !important;
  background-color: #fff6f5 !important;
}

.b_red2 {
  color: #ffffff !important;
  background-color: #ff5f58 !important;
}
.trademark {
  padding: 12px 0;

  .logo {
  }

  ._text {
    height: 105px;

    .el-row {
      height: 100%;
      display: flex;
      justify-content: space-between;
      flex-direction: column;

      .title_t {
        display: flex;
        justify-content: space-between;
      }

      .title_b {
        font-size: 12px;
      }
    }
  }
}

.b_bule {
  display: inline-block;
  background-color: #d3e2ff;
  margin: 3px 5px;
  border-radius: 5px;
  padding: 0px 10px;
  color: #387dff;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  cursor: pointer;
  border: none;
}

// ::v-deep .v_tabs .el-tabs__header .el-tabs__nav .el-tabs__item {
//   padding: 0 20px !important;
// }
.pagination {
  margin-top: 20px;
}

@media (max-width: 1360px) {
}

@media (max-width: 1280px) {
}

@media (max-width: 768px) {
}
</style>
